/*
    * @module:views/budget/organization/downToUpSpace
    * @author:zengfx
    * @date:2020-12-15
    * 自下而上空间编制
*/
<template>
  <div class="upToDownOrganization">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">自下而上空间编制</div>
      </div>
    </div>
    <div>
      <el-form :inline="true" :model="form" label-width="60px" class="formList">
        <!-- <el-form-item label="区域">
          <dx-cascader :area_id.sync="form.areaId" />
        </el-form-item> -->
        <el-form-item label="年份">
          <el-select v-model="form.year" placeholder="选择年份">
            <el-option v-for="item in yearList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.fileName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-button size="small" type="primary" @click="handleSearch()">查询</el-button>
      </el-form>
    </div>

    <div class="tableBox">
      <el-table v-loading="tableLoading" :data="tableData" style="width: 100%" class="tableTh28" border height="73vh" @selection-change="handleSelectionChange">
        <el-table-column type="selection" fixed class-name="fixedColumn"></el-table-column>
        <el-table-column prop="areaName" label="区域" width="150" class-name="area fixedColumn" fixed :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{scope.row.areaName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="fileName" label="名称" :show-overflow-tooltip="true" min-width="280"></el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <span
              class="bgBox"
              :class="{
                        'yellowBg':scope.row.status == 0,
                        'greenBg':scope.row.status == 1,
                        'redBg':scope.row.status == 2,
                        }"
            ></span>
            <span>{{listState(scope.row.status)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建人" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.createUserName">{{scope.row.createUserName}}</span>
            <span v-else>---</span>
          </template>
        </el-table-column>
        <el-table-column prop="importDate" label="时间" width="180" :formatter="dateFormat"></el-table-column>
        <el-table-column label="操作" width="350" class-name="operation">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleSee(scope.row,scope.$index)">查看</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { $budgetAPI } from '@/api/';
import { getSessionStorage } from '@/common/js/storage';
import { getCookie } from '@/common/js/cookie';
import { mergeTableRow } from '@/utils/mixin';
import prefixAPI from '@/api/prefixAPI';

export default {
    data() {
        return {
            rules: {
                year: [{ required: true, message: '请选择年份', trigger: 'blur' }],
                areaId: [{ required: true, message: '请选择区域', trigger: 'blur' }]
            },
            select: {
                areaId: '',
                year: ''
            },
            form: {
                // areaId: '',
                fileName: '',
                year: ''
            },
            showSelect: false,
            tableData: [],
            areaList: [],
            yearList: [],
            tableLoading: false,
            accountInfo: '',
            selectArray: [],
            newYearList: []
        };
    },
    created() {
        // this.accountInfo = JSON.parse(getSessionStorage('accountInfo'));
        // this.form.areaId = this.accountInfo.areaId;
    },
    mounted() {
        this.init();
    },
    methods: {
        exportBian(val) {
            // 根据不同模式切换不同的路径
            let token = getCookie('token');
            if (process.env.NODE_ENV == 'development') {
                window.location.href = prefixAPI.loc + '/api/bottomUpEdit/exportData?detailId=' + val + '&token' + token;
            } else if (process.env.NODE_ENV == 'production') {
                window.location.href = prefixAPI.hp + '/api/bottomUpEdit/exportData?detailId=' + val + '&token' + token;
            }
        },
        handleSelectionChange(val) {
            this.selectArray = val;
        },
        //table合并行
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            const span = column['property'] + '-span';
            if (row[span]) {
                return row[span];
            }
        },
        //时间格式化
        dateFormat(row, column, cellValue, index) {
            return this.moment(cellValue).format('YYYY-MM-DD HH:mm:ss');
        },
        async handleSearch() {
            let params = {
                // areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
                budgetYear: this.form.year,
                fileName: this.form.fileName ? this.form.fileName : ''
            };
            this.listEditFile(params, 'search');
        },
        listState(state) {
            // if (state == 1) {
            //     return '未提交';
            // }
            if (state == 0) {
                return '未审核';
            }
            if (state == 1) {
                return '审核通过';
            }
            if (state == 2) {
                return '审核失败';
            }
            if (state == 9) {
                return '---';
            }
        },
        handleSee(row, index) {
            this.$router.push({ path: '/budget/downToUpSpaceDetails', query: { detailId: row.id } });
        },
        //初始化
        init() {
            this.getYear().then(() => {
                setTimeout(() => {
                    let params = {
                        // areaId: this.accountInfo.areaId,
                        budgetYear: this.yearList[0],
                        fileName: ''
                    };
                    this.listEditFile(params);
                }, 1000);
            });
        },
        //获取编制文件列表
        listEditFile(params, rowIndex) {
            //rowIndex当查询时传search，加载下一级的时候穿点击的select

            $budgetAPI.getSpaceModelDataList(
                params,
                res => {
                    this.alertError(res);
                    if (res.code == 0) {
                        this.tableData = res.content;
                    }
                },
                err => {}
            );
        },
        //获取编制文件年份
        async getYear() {
            await $budgetAPI.getKongJianMonths(
                {},
                res => {
                    this.alertError(res);
                    this.yearList = res.content;
                    this.form.year = res.content[0];
                },
                err => {}
            );
        }
    }
};
</script>

<style lang="scss">
.upToDownOrganization {
    .formList {
        .el-button {
            margin-top: 5px;
            float: right;
        }
    }
    .el-dialog {
        .el-dialog__body {
            padding-top: 10px;
        }
        .formList {
            .el-form-item {
                margin-bottom: 20px;
            }
        }
    }

    th.el-table_1_column_1.area {
        text-align: center !important;
    }
    .area {
        text-align: left !important;

        span.indent2 {
            // padding-left: 2px;
        }

        span.indent3 {
            // padding-left: 16px;
        }

        span.indent4 {
            padding-left: 32px;
        }

        span.indent5 {
            // padding-left: 48px;
            i {
                border: 0;
            }
        }

        i {
            font-size: 10px;
            cursor: pointer;
            border: 1px solid #3a85e1;
            padding: 1px;
            border-radius: 5px;
            margin-right: 2px;
            color: #3a85e1;
        }
    }

    .operation {
        .el-link {
            margin-right: 8px;
        }
    }
}
</style>
<style lang="scss" scoped>
.upToDownOrganization {
    span.bgBox {
        border-radius: 50%;
        display: inline-block;
        width: 5px;
        height: 5px;
        overflow: hidden;
        vertical-align: middle;
    }
    span.grayBg {
        background: #f0f0f0;
    }

    span.yellowBg {
        background: #ffa200;
        color: #fff;
    }

    span.greenBg {
        background: #59c78d;
        color: #fff;
    }

    span.redBg {
        background: #f46a66;
        color: #fff;
    }
}
</style>
